<template>
    <span>
        <template v-if="action == 'table'  ">
            <!--<el-button v-for="button in show">-->
                <!--{{button}}-->
            <!--</el-button>-->
            <ul style="list-style: none;padding:0">
                 <li class="button" v-for="button in show">
                      <el-tooltip class="item" effect="dark" :content="button.show" placement="top">
                              <router-link  :to="getShowUrl(fieldLink.show,button.value)">
                                    {{button.show}}
                              </router-link>
                      </el-tooltip>
                 </li>
            </ul>

        </template>
        <template v-if="action == 'edit' || action == 'search' ">
            <el-select
                    style="width:100%"
                    :value="value"
                    v-on="$listeners"
                    filterable
                    class="RemoteMultiSelect"
                    :multiple="true"
                    reserve-keyword
                    :loading="loading"
                    :remote="remote"
                    :remote-method="remoteMethod"
                    placeholder="请输入搜索词">
                <el-option
                        v-for="item in option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>

                <el-option-group v-if="fieldLink.model"
                                 label="请输入关键词获取更多">
                </el-option-group>
            </el-select>

        </template>
    </span>
</template>
<script>
    //流程
    //1.先初始化下option下拉
    //2.如果已经有选中的. 先把他的值往option里面填充下(避免没有对应的option),然后选中.
    //3.搜索的时候  动态加载远程更多
    import base from '../base.js';
    export default {
        extends:base,
        props: {
            fieldLink:{//连表的相关结构
                type:Object,
                require:true,
            },
            fieldOption: {//如果不远程连表的话,这个代表备选数据
                type: Array,
                default: function () {
                    return [];
                },
            },
            fieldKey:String,
        },
        data() {
            return {
                loading:false,
                option:[],//远程调用存储数据的地方,
                multiple:true,
                remote:true,
            }
        },
        created(){
//            this.remote = this.fieldLink?true:false;
//            this.multiple=this.fieldMulti?true:false;
        },
        mounted() {
            //查看模式 ,不需要初始化了.编辑模式才需要option
            if(this.action!='table'){
                this.remoteMethod();
            }
        },
        watch:{
            data:function(newValue){
                this.initOption();
            },
            value:function(){
                if(this.action!='table') {
                    let selected = [];
                    //有值的话
                    if (typeof(this.value) == 'object' && typeof(this.value[0]) == 'object') {
                        let option = [];
                        this.value.forEach((value, key) => {
                            if (value[this.fieldLink.select[0]]) {
                                //作为备选option
                                this.setOption(value[this.fieldLink.select[0]], value, this.fieldLink.select);
                                //选中的
                                selected.push(value[this.fieldLink.select[0]]);
                            }
                            this.myValue = selected;
                        });
                    }
                }
            },
        },
        computed:{
            show(){
                //链表多选
                let name = [];
                this.value.forEach((value,i)=>{
                    let tmpValue='';
                    this.fieldLink.select.forEach((v, k) => {
                        if(k>0 && v && value[v]){
                            tmpValue+=value[v]+' ';
                        }
                    });
                    name.push( {'show':tmpValue,'value':value} );
                })
                return name;
            }
        },
        methods: {
            //初始化下拉框
            initOption(){
                this.setOption(0, '空');

                //只有编辑模式不需要option
                if(this.action!='edit'){
                    return false;
                }
            },

            getShowUrl(url,data){
              return this.$larfree.replaceParm(url,data);
            },

            //添加新的option
            setOption(key,value,schema){
                //如果是数字 就改成数字
                if(!isNaN(key))
                    key = key*1;

                //先检查是否重复了
                let pass=true;
                this.option.forEach((option, index) => {
                    if (option.value === key) {
                        pass=false;
                    }
                });
                if(!pass) return ;

                //如果schema存在,那就可能字段备选.
                if(schema){
                    let tmpValue='';
                    schema.forEach((v, k) => {
                        if(k>0 && v && value[v]){
                            tmpValue+=value[v]+' ';
                        }
                    });
                    value = tmpValue;
                }
                this.option.push({value:key,label:value});
            },
            clearOption(){
                this.option=[];
                this.setOption(0, '全部');
            },


            //远程读取数据,供给下拉
            remoteMethod(query) {
//                if (query !== '') {
                this.loading = true;
                let api = this.fieldLink.url;
                if(!api) {
                    console.log('remoteMethod:路径错误');
                }

                if(query) {
                    //有搜索条件的时候,api拼接
                    let field = this.fieldLink.field.slice(0);
                    let name = field.splice(1).join('|')+'$';
                    let keyword = query;
                    query = {};
                    query[name]='%' + keyword + '%';
                    api = this.$larfree.httpQuery(query, api);
                    this.clearOption();
                }

                this.$http.get(api)
                    .then((response)=>{
                        response.data.data.map((value)=>{
                            this.setOption(value[this.fieldLink.select[0]],value,this.fieldLink.select);
                        })

                        this.loading = false;
//                            this.debug.log(this.option);
                    })
                    .catch((error)=>{
                        console.log(error,'remoteMethod');
                    });
//                }
            }
        }

    }
</script>
<style scoped>
    .button{
        border: 1px solid #dcdfe6;
        padding: 3px;
        padding-left: 4px;
        border-radius: 5px;
        background: white;
        margin-bottom: 2px;
        text-align: center;
    }
    .button a{
        display: block;
        text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
        color:#606266;
    }
    .button a:hover{
        color:#409EFF ;
    }
    img{
        width:50px;
    }
    .el-select{
        width:220px;
    }
</style>
